<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <title>支付 - XPay个人收款支付系统v2.0 完全免费开源 个人支付宝、微信、QQ免签支付 个人免签支付 支付宝转账码 支持移动端支付</title>
        <meta name="keywords" content="XPay个人收款支付系统,个人免签支付,个人支付接口,免签约,无需第三方SDK,完全免费,支付宝,微信,移动端支付">
        <meta name="description" content="XPay个人收款支付系统 个人免签支付 个人支付接口 完全免费 免签约 支付宝转账码 无需第三方SDK 个人支付宝、微信、QQ免签支付 支持移动端支付 无视支付宝风控">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" type="image/png" href="favicon.ico">

        <!--<link rel="stylesheet" href="assets/css/swiper.min.css">-->
        <link rel="stylesheet" href="assets/css/animate.css">
        <link rel="stylesheet" href="assets/css/iconfont.css">
        <!--<link rel="stylesheet" href="assets/css/font-awesome.min.css">-->
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <!--<link rel="stylesheet" href="assets/css/bootstrap.min.css">-->
        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
        <!--<link rel="stylesheet" href="assets/css/magnific-popup.css">-->
        <link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.1/magnific-popup.min.css" rel="stylesheet">
        <link rel="stylesheet" href="assets/css/bootsnav2.css">

        <!--For Plugins external css-->
        <!--<link rel="stylesheet" href="assets/css/plugins.css" />-->
        <!--Theme custom css -->
        <link rel="stylesheet" href="assets/css/style.css">
    
        <!--Theme Responsive css-->
        <link rel="stylesheet" href="assets/css/responsive.css" />

        <link rel="stylesheet" href="assets/css/pay.css">

        <!--<script src="assets/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>-->
        <!--<script src="https://cdn.bootcss.com/modernizr/2.8.2/modernizr.min.js"></script>-->

        <!-- Hotjar Tracking Code for http://xpay.exrick.cn/ -->
        <script>
            (function(h,o,t,j,a,r){
                h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
                h._hjSettings={hjid:734009,hjsv:6};
                a=o.getElementsByTagName('head')[0];
                r=o.createElement('script');r.async=1;
                r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
                a.appendChild(r);
            })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
        </script>

    </head>

    <body data-spy="scroll" data-target=".navbar-collapse" style="background:#f1f2f7">

        <div class="culmn">
            <!--Home page style-->

            <nav class="navbar navbar-default bootsnav navbar-fixed white no-background" style="border-bottom: solid 1px #e0e0e0;background-color: #fff;">
                <div class="container">  

                    <!-- Start Atribute Navigation -->
                    <div class="attr-nav">
                        <ul>
                            <li><a href="https://github.com/Exrick/xpay" target="_blank" title="Github"><i class="fa fa-github" style="font-size:21px"></i></a></li>
                            <li><a href="http://blog.exrick.cn" target="_blank" title="作者博客"><i class="fa fa-user-circle" style="font-size:18px"></i></a></li>
                            <li><a><i class="fa fa-qrcode" style="font-size:19px" title="免费交流群 562962309" data-container="body" data-toggle="popover" data-placement="bottom"
                                data-html="true" data-content="<img src='assets/images/qq-qr.png' width='200'>" data-trigger="hover"></i></a></li>
                        </ul>
                    </div>
                    <!-- End Atribute Navigation -->


                    <!-- Start Header Navigation -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
                            <i class="fa fa-bars"></i>
                        </button>
                        <a class="navbar-brand" href="index">
                            <img src="assets/images/footer-logo.png" class="logo logo-display" alt="">
                            <img src="assets/images/footer-logo.png" class="logo logo-scrolled" alt="">
                        </a>

                    </div>
                    <!-- End Header Navigation -->

                    <!-- navbar menu -->
                    <div class="collapse navbar-collapse" id="navbar-menu">
                        <ul class="nav navbar-nav navbar-center">
                            <li><a href="index">首页</a></li>
                            <li><a href="pay">支付体验</a></li>
                            <li><a href="thanks">捐赠名单</a></li>
                            <li><a href="http://xmall.exrick.cn" target="_blank">XMall商城</a></li>
                            <li><a href="http://xboot.exrick.cn" target="_blank">XBoot开发平台</a></li>
                            <li><a href="https://github.com/Exrick/xpay" target="_blank">开发教程</a></li>
                        </ul>
                    </div><!-- /.navbar-collapse -->
                </div>
          </nav>

            <!--Featured Section-->
            <section id="features" class="features">
                <div class="container">
                    <div class="row">
                        <div class="main_features p-top-100">

                            <div class="gray-box">
                                <div class="title">
                                  <h2>确认订单</h2>
                                </div>
                                <!--内容-->
                                <div>
                                    <div class="order-info">
                                        <h3>提交订单成功，请填写捐赠信息</h3>
                                        <p class="payment-detail">为减轻后台压力，支付不起的小伙伴将在次日10:00AM统一收到支付结果邮件通知</p>
                                        <p class="payment-detail" style="color: #5c81e3;">成功支付≥5.00￥的小伙伴系统自动将【本套最新XPay v2.0源码(含文档)】发至您填写的邮箱</p>
                                        <p class="payment-detail"style="margin-bottom: 20px;" >
                                            成功支付≥68.00￥系统自动将作者开发的【微信小程序商城(不含后台)】发至您填写的邮箱
                                            <a href="https://v.qq.com/x/page/f0627kf4x1e.html" target="_blank">预览视频</a></p>
                                        <div class="pay-info">
                                            <div class="form">
                                                <div class="form-group">
                                                    <label for="nickName" class="control-label col-sm-3">昵称<span class="red-txt"> *</span></label>
                                                    <div class="col-sm-9">
                                                        <input class="form-control" id="nickName" name="nickName" maxlength="20" type="text" placeholder="请输入您的昵称"/>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="money-choose" class="control-label col-sm-3">捐赠金额<span class="red-txt"> *</span></label>
                                                    <div class="col-sm-9">
                                                        <select class="form-control m-bot15" id="money-choose" onchange="chooseMoney()">
                                                            <!--<option value="1.00" selected>￥1.00 支付测试</option>-->
                                                            <option value="5.00">￥5.00 感谢打赏</option>
                                                            <option value="68.00">￥68.00 感谢支持（含小程序商城）</option>
                                                            <option value="168.00">￥168.00 X-Boot完整版（仅供学习）</option>
                                                            <option value="custom">自定义 随意撒币</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group" id="custom-input" style="display: none">
                                                    <label for="money-choose" class="control-label col-sm-3">请输入金额<span class="red-txt"> *</span></label>
                                                    <div class="col-sm-9">
                                                        <input class="form-control" id="money" name="money" oninput="toMoney()" type="text" maxlength="20" placeholder="请确认您的支付金额(支持小数点后2位)"/>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="email" class="control-label col-sm-3">您的邮箱<span class="red-txt"> *</span></label>
                                                    <div class="col-sm-9">
                                                        <input class="form-control" id="email" name="email" type="text" maxlength="30" placeholder="支付结果及源码将发送至您邮箱(推荐QQ邮箱)"/>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="email" class="control-label col-sm-3">留言</label>
                                                    <div class="col-sm-9">
                                                        <input class="form-control" id="info" name="info" type="text" maxlength="50" placeholder="请输入您的留言内容"/>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="email" class="control-label col-sm-3" style="color:#5c81e3">体验管理员邮箱</label>
                                                    <div class="col-sm-9">
                                                        <input class="form-control" id="testEmail" name="testEmail" type="text" maxlength="30" placeholder="填写后您作为假管理员将收到审核邮件"/>
                                                    </div>
                                                </div>
                                            </div>
                                            </div>
                                        <div class="pay-type">
                                            <div class="p-title">支付方式</div>
                                            <div class="pay-item">
                                              <div id="ali" class="active" onclick="changeType(1)"><img src="assets/images/alipay@2x.png" alt=""></div>
                                              <div id="wechat" class="" onclick="changeType(2)"><img src="assets/images/weixinpay@2x.png" alt=""></div>
                                              <div id="qq" class="" onclick="changeType(3)"><img src="assets/images/qqpay.png" alt=""></div>
                                                <div id="uni" class="" onclick="changeType(4)"><img src="assets/images/uni.png" alt=""></div>
                                                <div id="dian" class="" onclick="changeType(5)"><img src="assets/images/diandan.png" alt=""></div>
                                            </div>
                                          </div>
                                    </div>
                                </div>

                                <div>
                                    <div class="box-inner">
                                      <div>
                                        <span>
                                          应付金额：
                                        </span>
                                        <em><span>¥</span><em id="realMoney"></em></em>
                                        <input type="text" class="main-btn" value="立刻支付" onclick="submit()" id="submit" readonly>
                                      </div>
                                    </div>
                                </div>

                              </div>

                        </div>
                    </div><!-- End off row -->
                </div><!-- End off container -->
            </section><!-- End off Featured Section-->

            <!-- scroll up-->
            <div class="scrollup">
                <a href="#"><i class="fa fa-chevron-up"></i></a>
            </div><!-- End off scroll up -->


            <footer id="footer" class="footer bg-black">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <nav class="navbar navbar-default bootsnav footer-menu no-background">
                                <div class="container">

                                    <!-- Start Atribute Navigation -->
                                    <div class="attr-nav">
                                        <ul>
                                            <li>
                                                <a href="https://github.com/Exrick/xpay" target="_blank" title="Github">
                                                    <i class="fa fa-github" style="font-size:21px"></i>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="http://blog.exrick.cn" target="_blank" title="作者博客">
                                                    <i class="fa fa-user-circle" style="font-size:18px"></i>
                                                </a>
                                            </li>
                                            <li>
                                                <a>
                                                    <i class="fa fa-qrcode" style="font-size:19px" title="免费交流群 562962309" data-container="body" data-toggle="popover" data-placement="top"
                                                        data-html="true" data-content="<img src='assets/images/qq-qr.png' width='150'>" data-trigger="hover"></i>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <!-- End Atribute Navigation -->


                                    <!-- Start Header Navigation -->
                                    <div class="navbar-header">
                                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-footer">
                                            <i class="fa fa-bars"></i>
                                        </button>
                                        <a class="navbar-brand" href="index"><img src="assets/images/footer-logo.png" class="logo" alt=""></a>
                                    </div>
                                    <!-- End Header Navigation -->

                                    <!-- navbar menu -->
                                    <div class="collapse navbar-collapse" id="navbar-footer">
                                        <ul class="nav navbar-nav navbar-center">
                                            <li><a href="index">首页</a></li>
                                            <li><a href="pay">支付体验</a></li>
                                            <li><a href="thanks">捐赠名单</a></li>
                                            <li><a href="http://xmall.exrick.cn" target="_blank">XMall商城</a></li>
                                            <li><a href="http://xboot.exrick.cn" target="_blank">XBoot开发平台</a></li>
                                            <li><a href="https://github.com/Exrick/xpay" target="_blank">开发教程</a></li>
                                        </ul>
                                    </div><!-- /.navbar-collapse -->
                                </div>   
                            </nav>
                        </div>
                        <div class="divider"></div>
                        <div class="col-md-12">
                            <div class="main_footer text-center p-top-40 p-bottom-30">
                                <p class="wow fadeInRight" data-wow-duration="1s">
                                    <a href="http://blog.exrick.cn/" target="_blank">xpay.exrick.cn </a> ©2017-Present. All Rights Reserved
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </footer>

            <!-- Modal -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="title">提示</h4>
                        </div>
                        <div class="modal-body" id="body">
                        </div>
                        <div class="modal-footer">
                            <button  data-dismiss="modal" class="btn btn-warning" type="button">确 认</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- JS includes -->

        <!--<script src="assets/js/vendor/jquery-1.11.2.min.js"></script>-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <!--<script src="assets/js/vendor/bootstrap.min.js"></script>-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>

        <!--<script src="assets/js/jquery.magnific-popup.js"></script>-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.1/jquery.magnific-popup.min.js"></script>
        <!--<script src="assets/js/jquery.easing.1.3.js"></script>-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.compatibility.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.0/js/swiper.jquery.min.js"></script>

        <script src="assets/js/jquery.collapse.js"></script>
        <script src="assets/js/bootsnav.js"></script>

        <script src="assets/js/plugins.js"></script>
        <script src="assets/js/main.js"></script>
        <script src="assets/js/jquery.cookie.js"></script>

    </body>
    <script>
        $("[data-toggle='popover']").popover();

        var url = window.location.href;
        if(url.indexOf("xboot")>=0){
            $("#money-choose").val("168.00");
        }

        var nickName="",money="",email="",testEmail="",payType="Alipay",picName="",custom=false,mobile=false;
        // 支付时间倒计时
        var setTime=90;

        // 判断移动设备
        if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
            mobile=true;
            // 判断移动设备 3分钟支付时间
            setTime=180;
        }
        // 判断是否支付宝内打开
        function isAlipay() {
            var ua = window.navigator.userAgent.toLowerCase();
            if (ua.indexOf("alipay")>=0) {
                return 1;
            }
            return 0;
        }
        function check(){
            nickName=$("#nickName").val();
            money=$("#money").val();
            email=$("#email").val();
            testEmail=$("#testEmail").val();

            if(nickName==""||email==""){
                showMsg('关键表单字段不能为空');
                return false;
            }
            if(picName=="custom"){
                if(!isMoney(money)){
                    showMsg('请填写正确的金额（支持2位小数，金额不得低于5.00元）');
                    return false;
                }
            }
            if(!isEmail(email)){
                showMsg('请填写正确的通知邮箱地址');
                return false;
            }
            if(testEmail!=""&&!isEmail(testEmail)){
                showMsg('请填写正确的体验管理员邮箱地址');
                return false;
            }
            return true;
        }

        function isMoney (v) {
            if(v==""||v==null||v<5){
                return false;
            }
            var regu = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
            var re = new RegExp(regu);
            if (re.test(v)) {
                return true;
            } else {
                return false;
            }
        }
        function isEmail (v) {
            var regu = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/
            var re = new RegExp(regu);
            if (re.test(v)) {
                return true;
            } else {
                return false;
            }
        }

        function toMoney () {
            money=$("#money").val();
            if(money==""){
                $("#realMoney").html("0.00");
                return;
            }
            money = parseFloat(money);
            money = money.toFixed(2);
            money = money.toLocaleString();
            $("#realMoney").html(money);
            return money;
        }

        chooseMoney();
        function chooseMoney() {
            var v=$("#money-choose").val();
            picName=v;
            $.cookie('picName', v);

            if(v=="custom"){
                custom = true;
                $("#custom-input").css("display", "block");
            }else{
                custom = false;
                if(v==""){
                    $("#realMoney").html("0.00");
                    return;
                }
                v = parseFloat(v);
                v = v.toFixed(2);
                v = v.toLocaleString();
                $("#realMoney").html(v);
                money=v;

                $("#custom-input").css("display", "none");
            }
        }

        function changeType(v){
            if(v==1){
                payType="Alipay";
                $("#ali").attr("class","active");
                $("#wechat").removeAttr("class");
                $("#qq").removeAttr("class");
                $("#uni").removeAttr("class");
                $("#dian").removeAttr("class");
            }else if(v==2){
                payType="Wechat";
                $("#ali").removeAttr("class");
                $("#wechat").attr("class","active");
                $("#qq").removeAttr("class");
                $("#uni").removeAttr("class");
                $("#dian").removeAttr("class");
            } else if(v==3){
                payType="QQ";
                $("#ali").removeAttr("class");
                $("#wechat").removeAttr("class");
                $("#qq").attr("class","active");
                $("#uni").removeAttr("class");
                $("#dian").removeAttr("class");
            } else if(v==4){
                payType="UnionPay";
                $("#ali").removeAttr("class");
                $("#wechat").removeAttr("class");
                $("#qq").removeAttr("class");
                $("#uni").attr("class","active");
                $("#dian").removeAttr("class");
            } else if(v==5){
                payType="Diandan";
                $("#ali").removeAttr("class");
                $("#wechat").removeAttr("class");
                $("#qq").removeAttr("class");
                $("#uni").removeAttr("class");
                $("#dian").attr("class","active");
            }
        }

        function submit(){
            if(!check()){
                return;
            }
            if(picName=="custom"){
                money=$("#money").val();
            }else{
                money=picName;
            }
            $.cookie('money', money);
            $.cookie('time', setTime);

            // 支付宝风控 v1.6改为转账码
            if(payType=="Alipay"){
                custom=true;
//                $.cookie('picName', "custom");
            }

            $("#submit").attr("disabled","disabled");
            $("#submit").val("提交中...");
            $.ajax({
                url:"/pay/add",
                type: 'POST',
                data:{
                    nickName:nickName,
                    money:money,
                    email:email,
                    testEmail:testEmail,
                    payType:payType,
                    info:$("#info").val(),
                    custom: custom,
                    mobile: mobile,
                    device: navigator.userAgent
                },
                success:function (data) {
                    if(data.success==true){
                        // 存入num和id
                        $.cookie('payNum', data.result.payNum);
                        $.cookie('payId', data.result.id);
                        $("#submit").removeAttr("disabled");
                        $("#submit").val("立刻支付");
                        if(payType=="Alipay"){
                            if(isAlipay()){
                                window.location.href="alipays://platformapi/startapp?appId=20000067&url="+
                                    encodeURIComponent("http://xpay.exrick.cn/openAlipay?money="+money+"&num="+data.result.payNum+"&id="+data.result.id);
                            }else{
                                window.location.href="/alipay";
                            }
                        }else if(payType=="Wechat"){
                            window.location.href="/wechat";
                        }else if(payType=="QQ"){
                            window.location.href="/qqpay";
                        }else if(payType=="UnionPay"){
                            // 重新存入价格信息
                            $.cookie('money', money-Number(data.result.payNum)*0.1);
                            $.cookie('originPrice', money);
                            window.location.href="/unipay";
                        }else if(payType=="Diandan"){
                            window.location.href="/diandan";
                        }
                    }else{
                        $("#submit").removeAttr("disabled");
                        $("#submit").val("立刻支付");
                        showMsg(data.message);
                    }
                },
                error:function(XMLHttpRequest){
                    if(XMLHttpRequest.status!=200){
                        $("#submit").removeAttr("disabled");
                        $("#submit").val("立刻支付");
                        alert('出错啦! 错误码:'+XMLHttpRequest.status);
                    }
                }
            });
        }

        function showMsg(m){
            $("#myModal").modal('show');
            $("#body").html(m);
        }
    </script>
</html>
